.clear{ clear:both; }

.stf_wrap{ width:900px; }
.stf_opts { margin-top: 20px; }
.stf_section{  }
.stf_opts label{ font-size:12px; font-weight:700; width:230px; display:block; float:left; }
.stf_input { padding:10px 10px; border-bottom:1px solid #eee; }
.stf_opts small{ 
	display: block;
	float: right;
	width: 330px;
	color: #999;
	font-style: italic;
	font-size: 12px; 
}
.stf_opts small:hover{ color:#444; }


.stf_opts input[type="text"], .stf_opts select{ width:250px; font-size:12px; padding:4px; color:#333; line-height:1em;	background:#efefef; }
.stf_input input:focus, .stf_input textarea:focus{ background:#fff; }
.stf_input textarea{ width:490px; height:150px; font-size:12px; padding:4px; color:#333; line-height:1.5em; background:#efefef;
}
.stf_table th, .stf_table td{ border:1px solid #bbb; padding:10px; text-align:center; }
.stf_table th, .stf_table td.feature{ border-color:#ccc; }

ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px; /*--Set height of tabs--*/
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 31px; /*--Subtract 1px from the height of the unordered list--*/
	line-height: 31px; /*--Vertically aligns the text within the tab--*/
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
	background: #e0e0e0;
}
ul.tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1.2em;
	padding: 0 10px 0 30px;
	border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
	outline: none;
	background-position: 6px 50%;
	background-repeat: no-repeat;
}
ul.tabs li a:hover {
	background-color: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background-color: #fff;
	border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}

.tab_container { border: 1px solid #999; border-top: none; overflow: hidden;
	clear: both; float: left; width: 100%; background: #fff; }
.tab_content { padding: 20px; }

#tabs-footer{ padding:20px; background: #e0e0e0; border-top: 1px solid #ccc; overflow:hidden; }
#tabs-footer p.submit{ margin:0; padding:0; float:right; }
#options-tabs .button-primary { 
	background-image: url('../images/disk.png');
	background-position: 6px 50%;
	background-repeat: no-repeat;
	padding: 8px 20px 8px 30px; 
	border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
	
#options-tabs .button-primary:hover{ background-color: #298CBA; }
#options-tabs .button-primary:active{ background-color: #21759B; }

.stf_options ul.tabs li a.basic{ padding-left: 30px; background-image: url('../images/cog.png'); }
.stf_options ul.tabs li a.layout{ padding-left: 30px; background-image: url('../images/layout_content.png'); }
.stf_options ul.tabs li a.fonts{ padding-left: 30px; background-image: url('../images/font.png'); }
.stf_options ul.tabs li a.advanced{ padding-left: 30px; background-image: url('../images/wrench_orange.png'); }
.stf_options ul.tabs li a.colors{ padding-left: 30px; background-image: url('../images/color_wheel.png'); }
.stf_options ul.tabs li a.social{ padding-left: 30px; background-image: url('../images/share_twitter.png'); }

#options-tabs .wysiwyg{ float:left; padding:0; }
#options-tabs .wysiwyg ul.panel li { background-color:transparent; }



